<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }

        html,
        body {

        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            display: block;
            width: 240px;
            height: 150px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .block {
            width: 100%;
            margin: auto;
            text-align: center;
        }

        .div-shop {
            height: 330px;
            width: 280px;

        }

        .card-shop {
            height: 330px;
            width: 280px;
            padding: 1px;
        }

        .col-shop {
            padding: 15px;
        }

        .div-bottom {

        }

        .span-shop-name {
            font-size: 25px;
            color: black;
            font-family: 宋体;
            font-weight: bold;
        }

        .grade-shop {
            font-size: 12px;
            padding: 5px;
        }


    </style>
    <style type="text/css">
        #_div14 {
            padding-top: 30px;
            text-align: center;
            background-color: cornflowerblue;
            height: 50px;
            color: white;
            font-size: 50px;
            background-image: url('/button.png');
        }

        #_div15 {
            padding-top: 30px;
            text-align: center;
            background-color: cornflowerblue;
            height: 100px;
            color: white;
            border-top-left-radius: 25px;     /* 左上角 */

            border-top-right-radius: 25px;    /* 右上角 */

            border-bottom-left-radius: 25px;  /* 左下角 */

            border-bottom-right-radius: 25px; /* 右下角 */
            font-size: 50px;
            background-image: url('/button.png');

        }
    </style>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24" v-if="total<=0" class="col-shop">
            <div id="_div15">暂无"{{keyword}}"相关店铺</div>
        </el-col>
        <el-col :span="6" v-for="item in shopList" v-if="total>0" class="col-shop">
            <div class="div-shop">
                <el-card class="card-shop">
                    <el-row>
                        <img :src="item.shop.imgSrc" class="image">
                        <el-divider></el-divider>
                        <div class="div-bottom">
                            <span v-text="item.shop.name" class="span-shop-name"></span>
                            <span class="button-shop">
                            <el-button type="primary" round class="button" size="small"
                                       @click.prevent="goToDetails(item.shop.id)">查看详情
                            </el-button>
                            </span>
                            <div class="grade-shop">
                                <el-tag size="small"><span v-text="item.grade"></span>&ensp;分
                                </el-tag>
                                &ensp;&ensp;&ensp;月售&ensp;
                                <span v-text="item.count"></span>

                            </div>
                            <div class="grade-shop">
                                人均消费&ensp;<span>￥</span>&ensp;<span
                                    v-text="item.perCost"></span>
                                <span v-for="typeItem in item.type">
                                <span style="color: orangered;background-color: wheat;"
                                      v-text="typeItem.typeName"></span>&nbsp;</span>
                            </div>
                        </div>
                    </el-row>
                </el-card>
            </div>
        </el-col>
    </el-row>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange(pageSize)"
                @current-change="handleCurrentChange(currentPage)"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>
<script>
    var shopShow = new Vue({
        el: "#app",
        data: {
            //
            currentPage: 1,
            pageSize: 4,
            currentDate: new Date(),
            shopList: [],
            typeList: [],
            typeName: '[[${typeName}]]',
            total: 0,
            shopId: '',
            keyword: '[[${keyword}]]'
        },
        methods: {
            handleSizeChange(pageSize) {
                console.log(`每页 ${pageSize} 条`);
            },
            handleCurrentChange(currentPage) {
                console.log(`当前页: ${currentPage}`);
                let _this = this;

                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.keyword
                }
                $.post("/shop/searchShopAllByES", params, function (data) {
                    _this.shopList = data.list;
                    _this.currentPage = data.pageNum;
                    _this.pageSize = data.pageSize;
                    _this.total = data.total;
                })
            },
            goToDetails(shopId) {
                location.href = "/shop/getShopDetails?shopId=" + shopId;
            },
            initSearchResult() {
                let _this = this;

                let params = {
                    currentPage: 1,
                    pageSize: 4,
                    keyword: this.keyword
                }
                $.post("/shop/searchShopAllByES", params, function (data) {
                    _this.shopList = data.list;
                    _this.currentPage = data.pageNum;
                    _this.pageSize = data.pageSize;
                    _this.total = data.total;
                })
            }
        },
        created() {
            console.log(this.keyword)
            this.initSearchResult();
        }
    });
</script>
</body>
</html>
